<script setup>
import WOW from "wow.js";

import CardMove from "@/components/card-move/index.vue";
import MoveImg from "@/components/move/index.vue";
import CommonHeader from "@/components/common/header/index.vue";
import CommonFooter from "@/components/common/footer/index.vue";
import CommonTop from "@/components/common/top/index.vue";

import { useGoToElement } from '@/hooks/index.js';
const gotoElement = useGoToElement();
function goto() {
    gotoElement('#ywfw');
}
import { onMounted } from "vue";
const box1Img = ref([
    'https://pic.imgdb.cn/item/65e68ba39f345e8d0345f4a8.png',
    'https://pic.imgdb.cn/item/65e68ba39f345e8d0345f531.png',
    'https://pic.imgdb.cn/item/65e68ba29f345e8d0345f2cd.png',
    'https://pic.imgdb.cn/item/65e68bd99f345e8d03466047.png',
])

const box2ContentList = [
    {
        icon: 'https://pic.imgdb.cn/item/65e68bdf9f345e8d03466c7d.png',
        title: '创意设计',
        desc: '挖掘客户需求，了解项目设计目标和所要表达的主题思想，运用各种创新工具和技术来激发创造力和创新思维，以此给客户提供设计参考，并根据项目实际落地环境，评估实施过程中可能出现的和技术难点，利于提前布局和准备，保证项目执行过程的高效率'
    },
    {
        icon: 'https://pic.imgdb.cn/item/65e68bde9f345e8d03466bd3.png',
        title: '技术实力',
        desc: '主要技术人员曾就职于“360游戏”,参与过《奇迹MU》的维护和《街篮》的后续功能开发并参与制作多款网页端小游戏、具有丰富的项目经验和优秀的技术能力，熟悉行业内的软件类型和架构，为您的项目提供强有力的技术保障'
    },
    {
        icon: 'https://pic.imgdb.cn/item/65e68be69f345e8d03467ea6.png',
        title: '动效和互动装置',
        desc: '团队美术精通UNITY内的UI动画设计和实现能利用各种创意 (AE、PS) 工具设计符合项目主题的特效，打造优秀的视觉表现。不仅如此团队成员还熟悉各种用于硬件交互的传感器设备和电子电路，能根据需要制作各种交互设备，打造新颖的交互方式'
    },
    {
        icon: 'https://pic.imgdb.cn/item/65e68be69f345e8d03467edc.png',
        title: '金牌服务',
        desc: '项目过程中技术和客户直接交流，避免中间层级过多导致理解需求出现偏差，技术全程对项目可能出现的需求改变进行评估，并实时反馈给客户;项目完成后，提供一年的免费维护，为您的项目保驾护航。'
    },
]

const box3Item = [
    {
        title: '查询类软件'
    },
    {
        title: '投影互动'
    },
    {
        title: 'KINECT互动'
    },
    {
        title: '手势互动'
    },
    {
        title: '语音识别'
    },
    {
        title: 'VR软件'
    },
    {
        title: 'AI互动开发'
    },
]

const delayTime = (index = 0, time = 0.5) => {
    return (index + 1) * time + 's';
}

const onMore = () => {
    const id = 'look-more'
    const url = 'https://space.bilibili.com/1402382531?spm_id_from=333.337.0.0'
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", id);
    // 防止反复添加      
    if (!document.getElementById(id)) {
        document.body.appendChild(a);
    }
    a.click();
}
onMounted(() => {
    const wow = new WOW({
        boxClass: "wow",
        animateClass: "animated",
        offset: 0,
        mobile: true,
        live: true,
        scrollContainer: null,
        resetAnimation: true
    });
    wow.init();
})
</script>

<template>
    <main class="home-container">
        <CommonHeader />
        <div class="home-content">
            <img class="top-radius" v-lazy="`https://pic.imgdb.cn/item/65e68bea9f345e8d034689ec.png`" />
            <div class="top">
                <img class="top-text" v-lazy="`https://pic.imgdb.cn/item/65e68beb9f345e8d03468a8d.png`" />
                <MoveImg img="https://pic.imgdb.cn/item/65e68be79f345e8d03468084.png"></MoveImg>
            </div>
            <div class="circle-scroll-box">
                <img class="circle-scroll" @click="goto"
                    v-lazy="`https://pic.imgdb.cn/item/65e68bd99f345e8d03465f96.png`" />
            </div>
            <div class="box box1" id="ywfw">
                <div class="box-title">
                    <img class="box-title-img" v-lazy="`https://pic.imgdb.cn/item/65e68bf39f345e8d03469e80.png`" />
                    <p>涵盖各场景各行业下的创意设计和互动软件制作</p>
                </div>
                <CardMove className="wow animate__fadeIn" :data-wow-delay="delayTime" :img-list="box1Img" />
            </div>
            <div class="box box2" id="fwys">
                <div class="box-title">
                    <img class="box-title-img" v-lazy="`https://pic.imgdb.cn/item/65e68bde9f345e8d03466c0d.png`" />
                    <p>生意宇宙的尽头，还是服务</p>
                </div>
                <div class="box2-warp">
                    <div class="item-box wow animate__fadeInUp" :data-wow-delay="delayTime(index, 0.1)"
                        v-for="(item, index) in box2ContentList">
                        <img class="item-icon" :src="item.icon" />
                        <div class="item-title">{{ item.title }}</div>
                        <div class="item-content ellipsis-6">{{ item.desc }}</div>
                    </div>
                </div>
            </div>
            <div class="box box3" id="aljs">
                <div class="box-title">
                    <img class="box-title-img" v-lazy="`https://pic.imgdb.cn/item/65e68ba39f345e8d0345f3e1.png`" />
                    <p>更多案例请视频请访问我们的哔哩哔哩视频频道</p>
                </div>
                <ul class="nav flex-cc">
                    <li class="nav-item wow animate__fadeInUp" :data-wow-delay="delayTime(index)"
                        v-for="item in box3Item">
                        {{ item.title }}</li>
                </ul>
                <div class="video">
                    <iframe src="//player.bilibili.com/player.html?aid=976755094&bvid=BV1Q44y1a7gk&cid=466694765&p=1"
                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                    <div class="more" @click="onMore">查看更多&nbsp;>></div>
                </div>
            </div>
            <div class="friend-box">
                <img class="friend-title" v-lazy="`https://pic.imgdb.cn/item/65e68bdf9f345e8d03466c2c.png`" />
                <div class="friend-content">
                    <img class="friend wow animate__fadeInDown"
                        v-lazy="`https://pic.imgdb.cn/item/65e68bd99f345e8d03465fd5.png`" />
                </div>
            </div>
        </div>
        <CommonFooter id="lxwm" />
        <CommonTop />
    </main>
</template>

<style scoped lang="scss">
.home-container {
    background-color: #080b38;
    height: 100%;
    overflow: hidden;

    .home-content {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        position: relative;
        background: linear-gradient(180deg, #7F71E3 46%, #271D6E 99%);
        margin: 0 10px;

        .top-radius {
            position: absolute;
            left: 0;
            top: 0;
            width: 284px;
            height: 254px;
        }

        .top {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 52px;

            .top-text {
                width: 752px;
                height: 602px;
                z-index: 1;

                @include respondTo(['phone', 'pad']) {
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                }
            }
        }

        .circle-scroll-box {
            margin: 35px 0;
            text-align: center;

            .circle-scroll {
                cursor: pointer;
                width: 26px;
                height: 26px;
            }
        }

        .box {
            .box-title {
                text-align: center;
                margin-bottom: 33.5px;
                position: relative;

                .box-title-img {
                    width: 161px;
                    height: 36px;
                    margin-bottom: 14px;
                }

                p {
                    font-size: 17px;
                    color: #fff;

                    @include respondTo(['phone', 'pad']) {
                        font-size: 15px;
                    }
                }
            }
        }

        .box1 {
            text-align: center;
            margin-bottom: 35px;

            .box1-warp {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                max-width: $box-width;
                margin: 0 auto;

                .item-box {
                    flex-basis: 50%;

                    &:nth-child(1),
                    &:nth-child(2) {
                        margin-bottom: 61px;
                    }
                }

                .item {
                    width: 320.17px;
                    height: 433.58px;

                }
            }
        }

        .box2 {
            text-align: center;
            margin-bottom: 35px;

            .box2-warp {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                max-width: $box-width;
                margin: 0 auto;

                @include respondTo(['phone', 'pad']) {
                    justify-content: center;
                }

                .item-box {
                    color: #fff;
                    width: 379.39px;
                    height: 269.95px;
                    padding: 25px 20px 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 40px;
                    overflow: hidden;
                    background-image: url(https://pic.imgdb.cn/item/65e68bf39f345e8d03469f12.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                    transition: transform .35s ease-in-out;

                    &:nth-child(1),
                    &:nth-child(2) {
                        margin-bottom: 61px;
                    }

                    @include respondTo(['phone', 'pad']) {
                        margin: 0 10px 30px;

                        &:nth-child(1),
                        &:nth-child(2) {
                            margin-bottom: 30px;
                        }
                    }

                    &:hover {
                        transform: rotateX(7deg) translateY(-6px);
                    }

                    .item-icon {
                        width: 38px;
                        height: 38px;
                        margin-bottom: 5px;
                    }

                    .item-title {
                        margin-bottom: 12px;
                        font-size: 20px;
                    }

                    .item-content {
                        text-align: left;
                        text-indent: 20px;
                        font-size: 16px;
                        line-height: 23px;
                        font-weight: bold;
                    }
                }
            }
        }

        .box3 {
            text-align: center;

            .nav {
                margin-bottom: 30px;

                @include respondTo(['phone', 'pad']) {
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: 0 10px;
                    margin-bottom: 10px;
                }

                .nav-item {
                    padding: 7px 15px;
                    color: #fff;
                    background: #0059DD;
                    border-radius: 99px;
                    border: 1px solid #FFFFFF;
                    margin-right: 27.5px;

                    &:last-child {
                        margin-right: 0;
                    }

                    @include respondTo(['phone', 'pad']) {
                        margin-right: 0;
                        margin-bottom: 10px;
                        width: auto;
                    }
                }
            }

            .video {
                margin: 0 auto 46px auto;

                iframe {
                    width: 775px;
                    height: 436px;

                    @include respondTo(['phone', 'pad']) {
                        width: 100%;
                        height: 300px;
                    }
                }

                .more {
                    width: 121px;
                    height: 38px;
                    line-height: 38px;
                    background: #0059DD;
                    border-radius: 99px;
                    margin: 15px auto 0 auto;
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    transition: all .3s ease-out;

                    &:hover {
                        opacity: .7;
                    }
                }
            }
        }

        .friend-box {
            height: 264px;
            background: #0066FF;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 15px;
            padding-bottom: 25px;
            margin-bottom: 60px;
            overflow: hidden;

            .friend-title {
                width: 146px;
                height: 36.5px;
                margin-bottom: 10px;
            }

            .friend-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                max-width: $box-width;
                margin-top: 15px;

                @include respondTo(['phone', 'pad']) {
                    animation: scrollToRight 10s linear infinite;
                }

                .friend {
                    @include respondTo(['phone', 'pad']) {
                        width: 200%;
                        max-width: 200%;
                    }
                }

            }
        }
    }
}

@keyframes scrollToRight {
    0% {
        transform: translate3d(-105%, 0, 0);
    }

    100% {
        transform: translateZ(0);
    }
}

.ellipsis-6 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}
</style>
